<template>
    <div v-if="dialogVisible">
        <quill-editor
            ref="QuillEditor"
            class="editor"
            v-model="formData.content"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
        />
        <div class="footer">
            <el-button type="primary" size="mini" @click="onSave" v-if="canEdit">保存</el-button>
            <el-button type="default" size="mini" @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
// import SelectOrg from '@/components/selectOrg'
// import Pagination from '@/components/pagination/pagination'
import { debounce } from '@/utils/common'
import {
    // biddingAnnouncementList,
    biddingAnnouncementBase,
    biddingAnnouncementDelete
    // biddingAnnouncementAdd,
    // biddingAnnouncementUpdate
} from '@/api/base/bidding'
import tenderRequest from '@/api/tender/tender.js'
import { mapState } from 'vuex'
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//引入Qill插件
// 工具栏配置
const toolbarOptions = [
    ['insertMetric'],
    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
    ['blockquote', 'code-block'], //引用，代码块
    [{ header: 1 }, { header: 2 }], // 几级标题
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
    [{ script: 'sub' }, { script: 'super' }], // 下角标，上角标
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ direction: 'rtl' }], // 文字输入方向
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 颜色选择
    [{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
    [{ align: [] }], // 居中
    ['clean'], // 清除样式,
    ['link', 'image'] // 上传图片、上传视频
]

// toolbar标题
const titleConfig = [
    { Choice: '.ql-insertMetric', title: '跳转配置' },
    { Choice: '.ql-bold', title: '加粗' },
    { Choice: '.ql-italic', title: '斜体' },
    { Choice: '.ql-underline', title: '下划线' },
    { Choice: '.ql-header', title: '段落格式' },
    { Choice: '.ql-strike', title: '删除线' },
    { Choice: '.ql-blockquote', title: '块引用' },
    { Choice: '.ql-code', title: '插入代码' },
    { Choice: '.ql-code-block', title: '插入代码段' },
    { Choice: '.ql-font', title: '字体' },
    { Choice: '.ql-size', title: '字体大小' },
    { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
    { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
    { Choice: '.ql-direction', title: '文本方向' },
    { Choice: '.ql-header[value="1"]', title: 'h1' },
    { Choice: '.ql-header[value="2"]', title: 'h2' },
    { Choice: '.ql-align', title: '对齐方式' },
    { Choice: '.ql-color', title: '字体颜色' },
    { Choice: '.ql-background', title: '背景颜色' },
    { Choice: '.ql-image', title: '图像' },
    { Choice: '.ql-video', title: '视频' },
    { Choice: '.ql-link', title: '添加链接' },
    { Choice: '.ql-formula', title: '插入公式' },
    { Choice: '.ql-clean', title: '清除字体格式' },
    { Choice: '.ql-script[value="sub"]', title: '下标' },
    { Choice: '.ql-script[value="super"]', title: '上标' },
    { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
    { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
    { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
    { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
    { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
    { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
    { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
    { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
    { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
    { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
    { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
    { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
    { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
    { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
    { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
    { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]
export default {
    components: {
        quillEditor
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        tenderClass: {
            type: Number,
            default: 0
        },
        tenderForm: {
            type: String,
            default: ''
        },
        content: {
            type: String,
            default: ''
        },
        // showEdit: {
        //     type: blur,
        //     default: true
        // },
        canEdit: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            treeData: [],
            paginationInfo: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            },
            tableData: [],
            formData: {
                content: ''
            },
            params: {
                dicName: '',
                dicKey: ''
            },
            MouseEnterId: 0,
            selectData: null,
            currencyOptions: [],
            tabsName: 'baseInfo',
            tableData2: [],
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            idsTop: [],
            pagination: {
                limit: 10,
                page: 1,
                total: ''
            },
            editorOption: {
                modules: {
                    toolbar: toolbarOptions
                },
                theme: 'snow',
                placeholder: '请输入正文'
            },
            rules: {
                name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
                tenderClass: [
                    { required: true, message: '请选择招标类别', trigger: 'change', type: 'number' }
                ],
                tenderForm: [
                    { required: true, message: '请选择招标方式', trigger: 'change', type: 'string' }
                ]
            },
            dicName: '招标公告',
            cloneContent: ''
        }
    },
    computed: {
        // 列表宽度
        rightTableWidth () {
            return this.screenWidth - 280 + 'px'
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return this.screenWidth - 300 + 'px'
        },
        ...mapState({
            userInfo: state => state.userInfo
            // tenderForm: state => state.biddingApplication.dictionaries.tenderForm
            // tenderClass: state => state.biddingApplication.dictionaries.tenderClass
        })
    },
    watch: {
        viewList: function (data) {
            if (data === 'add' || data === 'edit') {
                setTimeout(() => {
                    this.initTitle()
                }, 500)
            }
        },
        dialogVisible: function (data) {
            if (data) {
                this.basePublicGetBasePublic()
            }
        }
    },
    created () {
        this.basePublicGetBasePublic()
        setTimeout(() => {
            console.log('tenderClass', this.tenderClass)
            console.log('tenderForm', this.tenderForm)
        }, 1000)
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {
        basePublicGetBasePublic () {
            if (this.content) {
                this.formData.content = this.content
                return
            }
            tenderRequest.basePublicGetBasePublic(this.tenderClass, this.tenderForm).then(res => {
                this.cloneContent = typeof res === 'string' ? res : ''
                this.formData.content = typeof res === 'string' ? res : ''
            })
        },
        initTitle () {
            for (let item of titleConfig) {
                let tip = document.querySelector('.quill-editor ' + item.Choice)
                if (!tip) continue
                tip.setAttribute('title', item.title)
            }
        },
        onSelectOrg (val) {
            console.log('onSelectOrg: ', { ...val })
            this.formData = {
                ...val,
                currency: 10
            }
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        onSearch (e) {
            let searchKey = e
            console.log('searchKey', searchKey)
            this.params.dicKey = searchKey
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            console.log(searchKey)
            this.getTableData()
        },
        goAdd () {
            this.viewList = 'add'
            this.formData = {
                content: '',
                founderId: '',
                founderName: '',
                gmtCreate: '',
                gmtModified: '',
                id: '',
                name: '',
                orgId: '',
                orgName: '',
                tenderClass: 0,
                tenderForm: this.tenderForm[0].kvValue,
                tenderFormName: this.tenderForm[0].kvKey
            }
        },
        onEdit () {
            if (!this.selectData) return
            this.viewList = 'edit'
            this.formData = this.selectData
        },
        onDistPost () {
            this.viewList = 'post'
        },
        onSave () {
            const callBack = () => {
                this.$emit('save', this.formData.content)
                this.$emit('update:dialogVisible', false)
                this.clientPop('suc', '公告保存成功')
            }
            this.clientPop(
                'info',
                '根据四川省人民政府信息公开办公室相关文件要求，企业官网不允许泄露个人隐私，招标公告中的联系人，必须是xxx先生/女士的格式',
                callBack
            )
            // this.formData.tenderFormName = this.tenderForm.find(
            //     x => x.kvValue === this.formData.tenderForm
            // ).kvKey
            // this.$refs.form.validate(valid => {
            //     if (valid) {
            //         if (this.viewList === 'add') {
            //             this.formData.orgName = this.userInfo.orgInfo.orgName
            //             this.formData.orgId = this.userInfo.orgInfo.orgId
            //             biddingAnnouncementAdd(this.formData).then(() => {
            //                 this.clientPop('suc', '保存成功', () => {
            //                     this.viewList = true
            //                     this.getTableData()
            //                 })
            //             })
            //         } else if (this.viewList === 'edit') {
            //             biddingAnnouncementUpdate(this.formData).then(() => {
            //                 this.clientPop('suc', '保存成功', () => {
            //                     this.viewList = true
            //                     this.getTableData()
            //                 })
            //             })
            //         }
            //     }
            // })
        },
        //取消
        onCancel () {
            this.formData.content = this.cloneContent
            this.$emit('update:dialogVisible', false)
        },
        //表格选中
        tableSelect (row) {
            this.selectData = row
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //编辑
        tableDbEdit (row) {
            if (!row) return
            biddingAnnouncementBase(row.id).then(res => {
                this.formData = res
                this.viewList = 'edit'
            })
        },
        //详情
        tableDbShow (row) {
            if (!row) return
            biddingAnnouncementBase(row.id).then(res => {
                this.formData = res
                this.viewList = 'show'
            })
        },
        tableDbDelete (row) {
            this.clientPop(
                'err',
                '确定要删除吗？删除的数据可以在【回收站】还原或彻底删除。',
                () => {
                    biddingAnnouncementDelete(row.id).then(() => {
                        this.clientPop('suc', '删除成功', () => {
                            this.viewList = true
                            this.getTableData()
                        })
                    })
                }
            )
        },
        currentChange (page) {
            this.pagination.page = page
            this.getTableData()
        },
        updatePageSize (limit) {
            this.pagination.limit = limit
            this.getTableData()
        },
        //失去焦点事件
        onEditorBlur (quill) {
            console.log('editor blur!', quill)
        },
        //获得焦点事件
        onEditorFocus (quill) {
            console.log('editor focus!', quill)
        },
        // 准备富文本编辑器
        onEditorReady (quill) {
            console.log('editor ready!', quill)
        },
        //内容改变事件
        onEditorChange ({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.formData.content = html
        }
    }
}
</script>

<style lang="scss" scoped>
.footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 50px;
}
.right {
    border: none;
}
</style>
<style lang="scss">
.editor {
    line-height: normal !important;
    height: 300px;
    margin-bottom: 42px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
}
</style>
